<template>
	<div class="reportlist-container">
		<!-- 头部 -->
		<div class="header">
			<div class="back-btn" @click="goBack">←</div>
			<h1>健康档案</h1>
		</div>
		<!-- 图片部分 -->
	<div class="reportcard">
		<div class="report-image">
			<img src="@/assets/report.png" alt="健康档案">
		</div>
	</div>	
		<!-- 报告列表 -->
		<div class="report-list">
			<div class="next-btn" @click="goNext">
			<div class="report1">
				<div class="left">
				    <img src="@/assets/reportlist.png" alt="报告">	
				</div>
				<div class="right">
					<h1>2021年11月24日 体检报告</h1>
					<h2>沈阳世贸熙康健康管理中心</h2>
					</div>
				</div>
				
			</div>
			<div class="next-btn" @click="goNext">
			<div class="report2">
				<div class="left">
					<img src="@/assets/reportlist.png" alt="报告">
				</div>
				<div class="right">
					<h1>2019年10月11日 体检报告</h1>
					<h2>沈阳熙康云医院</h2>
				</div>
				</div>
			</div>
		</div>
		
		
		<!-- 底部导航 -->
	<div class="bottom-nav">
	  <div class="nav-item" :class="{ active: currentNav === 'hospital' }">
	    <span class="nav-icon">🏥</span>
	    <span class="nav-text">云医院</span>
	  </div>
	  <div class="nav-item" :class="{ active: currentNav === 'mall' }">
	    <span class="nav-icon">🛒</span>
	    <span class="nav-text">商城</span>
	  </div>
	  <div class="nav-item" :class="{ active: currentNav === 'discover' }">
	    <span class="nav-icon">🔍</span>
	    <span class="nav-text">发现</span>
	  </div>
	  <div class="nav-item" :class="{ active: currentNav === 'personal' }" @click="goToPersonal">
	    <span class="nav-icon">👤</span>
	    <span class="nav-text">我</span>
	  </div>
	</div>			
	</div>
</template>

<script setup>
	import { useRouter } from 'vue-router'
	
	const router = useRouter()
	
// 返回上一页
const goBack = () => {
  router.back()
}
	
	// 继续下一页
	const goNext = () => {
	  router.push('/report')
	}
	   

</script>

<style scoped>
	/* 头部格式 */
.report-container{
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 60px;
}

.header{
	position: relative;
	background: white;
	padding: 15px;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.back-btn{
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	cursor: pointer;
}

.header h1 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.reportcard{
      width: 300px; 
	  display: flex;
	  justify-content: center;
	  align-items: center;
}

.report-image{
      flex: 1;
      z-index: 2;
}

/* 报告格式 */
 
	
/* 底部格式 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  border-top: 1px solid #eee;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.nav-icon {
  font-size: 20px;
  margin-bottom: 2px;
}

.nav-text {
  font-size: 10px;
  color: #666;
}

.nav-item.active .nav-text {
  color: #1890ff;
}
</style>